<template>
  <div class="app-container">
    <el-card class="pag-container">
      <div class="title-top">
        <div class="header-title">
            <span class="header-title-text">      
                <span class="_before" v-if="typeRef=='add'">发布广告</span>
                <span class="_before" v-else-if="typeRef=='edit'">编辑公告</span>
                <span class="_before" v-else-if="typeRef=='dataInfo'">公告详情</span>
            </span>
        </div>
      </div>
      <el-form ref="formRef" style="margin-top: 30px;" :model="form" :rules="rules" label-width="auto" v-if="typeRef=='add' || typeRef=='edit'">
        <el-form-item label="公告标题" prop="title">
              <el-input v-model="form.title" style="width: 200px" placeholder="请输入公告标题" maxlength="200" />
        </el-form-item>
         <el-form-item label="接受用户类型" prop="platformType">
              <el-select v-model="form.platformType" style="width: 200px" placeholder="请选择">
                        <el-option
                            v-for="item in platformTypeListRef"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                      </el-select>
        </el-form-item>
         <el-form-item label="公告内容" >
              <div style="width: 100%;">
                <ImageTextEditor ref="editor" :previewHtml="detailFileList"></ImageTextEditor>
              </div>
        </el-form-item>
         <el-form-item label="发布方式" prop="publishMethod">
                <div  style="width: 100%">
                <el-select v-model="form.publishMethod" style="width: 200px" placeholder="选择状态">
                    <el-option label="立即发布" :value="5"></el-option>
                    <el-option label="定时发布" :value="10"></el-option>
                  </el-select>
                </div>
                <div style="width: 100%;margin-top: 10px;"  v-if="form.publishMethod==10">
                  <el-date-picker
                    v-model="form.publishDate"
                    style="width: 200px"
                    type="datetime"
                    placeholder="请选择"
                    :disabled-date="disabledDate"
                    :shortcuts="shortcuts"                 
                  />
                </div>
              </el-form-item>
          <div class="dialog-footer">
            <el-button>取消</el-button>
            <el-button type="primary" @click="submitForm(formRef)">发布</el-button>
          </div>
      </el-form>
      <div class="main-msg" v-else-if="typeRef=='dataInfo'">
      <div class="title">{{form.title}}</div>
      <div class="time">{{formatDate(form.publishDate)}}</div>
      <div class="centen" v-html="form.platformContent"></div>

    </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted,toRefs,onActivated,nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue'
import ImageTextEditor from '@/components/upload/imageTextEditor'
import { addPlatformNotices ,getDetailsById,setRead} from '@/api/platformNotices/index'
import type { FormInstance, FormRules } from 'element-plus'
import { formatDate } from '@/utils'
import { useRoute } from 'vue-router'
// import { nextTick } from 'process';
const editor = ref()
const formRef = ref()
const detailFileList = ref()
const platformTypeListRef =ref([
  {
    label:'货代',
    value:5
  },{
    label:'集装箱公司',
    value:10
  },{
    label:'箱贸易',
    value:15
  },{
    label:'集卡车队',
    value:20
  },{
    label:'堆场',
    value:25
  },{
    label:'所有用户',
    value:30
  }
])
const route = useRoute();
const typeRef=ref('add')
onActivated(() => {
  nextTick(() => {
     typeRef.value=route.query.type
      if(route.query.type!='add'){
        form.value.id=Number(route.query.id)
        getRoleDetail() 
      }
  })

})
const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '明天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() + 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '下周',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 3600 * 1000 * 24
}
const data = reactive({
  form: {
  publishDate:''
  },
  rules: {
    title: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
    platformType: [{ required: true, message: "用户类型不能为空", trigger: "blur" }],
    publishMethod: [{ required: true, message: "发布方式不能为空", trigger: "blur" }],


  }
});
//详情查询
const getRoleDetail=()=>{
  getDetailsById(form.value.id).then(res => {
    form.value=res.data
    if(typeRef.value=='edit'){
      editor.value.setData(res.data.platformContent)
    }
  })
}
const { form, rules } = toRefs(data);
/** 提交按钮 */
const submitForm = (formEl: FormInstance | undefined) =>{
  if (!formEl) return
  formEl.validate(valid => {
   let dataForm=JSON.parse(JSON.stringify(form.value))
    if (valid) {
        dataForm.platformContent=editor.value.getContent()
        if(dataForm.publishMethod==10){
           if(dataForm.publishDate==''){
            ElMessage.warning('定时发布时间不能为空');
            return false
          }
          let time=Date.now() + 300000
          let publishDateSt=Date.parse(dataForm.publishDate)
          if(publishDateSt<time){
            ElMessage.warning('定时发布时间至少大于当前时间5分钟');
            return false
          }
        }
        if(typeRef.value=='add'){
          addPlatformNotices(dataForm).then(response => {
                ElMessage.success('发布成功');
                // getRoleDetail()
          });
        }else{
            setRead(dataForm).then(response => {
                ElMessage.success('编辑成功');
                // getRoleDetail()
          });
        }
          
    }
  });
};

</script>
<style scoped>
.dialog-footer{
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.title{
  text-align: center;
  font-weight: bold;
}
.time{
  color: #666;
  text-align: center;
  margin-top: 10px;
}
.tabs{
  display: flex;
  margin: 20px 0;
}
.item{
  margin-right: 50px;
}
.centen{
  line-height: 30px;
}
</style>